<template>
<div class="page-body" v-loading="loading">
    <div class="page-header">
    <!-- <h1 class="page-title">驾驶分析</h1>
    <el-breadcrumb>
      <el-breadcrumb-item :to="{path: '/'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item >驾驶分析</el-breadcrumb-item>
    </el-breadcrumb> -->
      <div style="width:100%" class="top_menu">
    <el-select v-model="lookScope" @change="handelChange" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <template v-if="lookScope === 'daily'">
      查看日期：<el-date-picker
        v-model="date"
        type="date"
        :clearable="false"
        @change="changeDate"
        value-format="yyyy/MM/dd"
        :picker-options="pickerOptions"
        placeholder="选择日期">
      </el-date-picker>
    </template>
     <template v-if="lookScope === 'customRange'">
      <el-date-picker
      v-model="SEdates"
      type="daterange"
      range-separator="至"
      :picker-options="pickerOptions"
      @change="changeDate1"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
    </template>
    </div>
  </div>
  <el-row>
    <el-col :span="8">
      <el-card class="box-card" :body-style="{ padding: '0px' }">
        <!-- 四急数据统计 -->
        <div id="fhChart" class="chart"></div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="box-card" :body-style="{ padding: '0px' }">
        <!-- 综合评分数据统计 -->
        <div id="ssChart" class="chart"></div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="box-card" :body-style="{ padding: '0px' }">
        <!-- 昼夜比数据统计 -->
        <div id="dnChart" class="chart"></div>
      </el-card>
    </el-col>
  </el-row>
    <el-row>
    <el-col :span="8">
      <el-card class="box-card" :body-style="{ padding: '0px' }">
        <!-- 里程数据统计 -->
        <div id="wkChart" class="chart"></div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="box-card" :body-style="{ padding: '0px' }">
        <!-- 行驶时长数据统计 -->
        <div id="dhChart" class="chart"></div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="box-card" :body-style="{ padding: '0px' }">
        <!-- 行驶车速数据统计 -->
        <div id="dsChart" class="chart"></div>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>
<script type="text/javascript">
import echarts from 'echarts'
import { getAnalysisInfo, listWeekDates } from '@/apis/basicInfo'
import { getAnalysisData } from '@/apis/violation'
import { formatDate } from '@/utils/date'
import { listGradeByDate } from '@/apis/grade'
import Vue from 'Vue'
Vue.use(echarts)
export default {
  mounted () {
    this.end = formatDate(new Date(), 'yyyy/MM/dd')
    this.begin = new Date()
    this.begin = formatDate(this.begin.setDate(this.begin.getDate() - 6), 'yyyy/MM/dd')
    this.load()
  },
  data () {
    return {
      basicInfo: {},
      violationData: {},
      loading: false,
      dates: [],
      grades: [],
      date: new Date(),
      violationMap: [],
      lookScope: 'week',
      SEdates: [],
      begin: '2019/10/1',
      end: '2019/10/10',
      options: [
        {
          value: 'week',
          label: '近一周行驶数据'
        },
        {
          value: 'month',
          label: '近30天行驶数据'
        },
        {
          value: 'customRange',
          label: '自定义查看范围'
        }
      ],
      pickerOptions: {

        disabledDate (time) {
          return time.getTime() >= Date.now() - 8.64e6
        }
      }
    }
  },
  methods: {
    load () {
      this.loading = true
      getAnalysisInfo(this.begin, this.end).then(e => {
        getAnalysisData(this.begin, this.end).then(e => {
          this.violationData = e.data
          listWeekDates(this.begin, this.end).then(e => {
            this.dates = []
            e.data.map(e => {
              this.dates.push(formatDate(e, 'yyyy/MM/dd'))
            })
            listGradeByDate(this.begin, this.end).then(e => {
              this.grades = []
              for (let index = e.data.length - 1; index >= 0; index--) {
                this.grades.push(parseInt(e.data[index].synthesizeScore))
              }
              console.log(this.grades)
              this.init()
              this.loading = false
            })
          })
        })
        this.basicInfo = e.data
      })
    },
    changeDate1 () {
      this.begin = this.SEdates[0]
      this.end = this.SEdates[1]
      this.begin = formatDate(this.begin, 'yyyy/MM/dd')
      this.end = formatDate(this.end, 'yyyy/MM/dd')
      this.load()
    },
    changeDate () {
    },
    // 改变查看范围
    handelChange () {
      this.$message(this.lookScope)
      if (this.lookScope === 'week') {
        this.end = formatDate(new Date(), 'yyyy/MM/dd')
        this.begin = new Date()
        this.begin = formatDate(this.begin.setDate(this.begin.getDate() - 6), 'yyyy/MM/dd')
        this.load()
      } else if (this.lookScope === 'month') {
        this.end = formatDate(new Date(), 'yyyy/MM/dd')
        this.begin = new Date()
        this.begin = formatDate(this.begin.setDate(this.begin.getDate() - 29), 'yyyy/MM/dd')
        this.load()
      } else {
        if (this.SEdates.length >= 2) {
          this.begin = this.SEdates[0]
          this.end = this.SEdates[1]
          this.begin = formatDate(this.begin, 'yyyy/MM/dd')
          this.end = formatDate(this.end, 'yyyy/MM/dd')
          this.load()
        }
      }

      console.log(this.begin)
      console.log(this.end)
    },
    init () {
      var fhChart = echarts.init(document.getElementById('fhChart'))
      var ssChart = echarts.init(document.getElementById('ssChart'))
      var dnChart = echarts.init(document.getElementById('dnChart'))
      var wkChart = echarts.init(document.getElementById('wkChart'))
      var dhChart = echarts.init(document.getElementById('dhChart'))
      var dsChart = echarts.init(document.getElementById('dsChart'))
      // 四急表格配置开始
      var fhOption = {
        backgroundColor: '#fff',
        color: ['#37A2DA', '#67E0E3', '#9FE6B8'],

        tooltip: {
          trigger: 'axis'
        },
        legend: {
          bottom: 'bottom',
          data: ['急加速', '急减速', '急刹车', '急转弯']
        },
        grid: {
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dates
        },
        yAxis: {

          x: 'center',
          type: 'value',
          minInterval: 1,
          name: '次'

        },
        series: [{
          name: '急加速',
          type: 'line',
          smooth: false,
          data: this.violationData[2]
        }, {
          name: '急减速',
          type: 'line',
          smooth: false,
          data: this.violationData[3]
        }, {
          name: '急刹车',
          type: 'line',
          smooth: false,
          data: this.violationData[4]
        }, {
          name: '急转弯',
          type: 'line',
          smooth: false,
          data: this.violationData[5]
        }],
        title: ([{
          text: '四急数据统计',
          left: 'center',
          // bottom: -5,
          textStyle: {
            fontSize: 25
          }
        }])
      }
      // 四急表格配置结束

      // 综合评分数据统计配置开始
      var ssOption = {
        backgroundColor: '#fff',
        color: ['#37A2DA'],


        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dates

        },
        yAxis: {
          x: 'center',
          type: 'value',
          max: 100,
          name: '分'
        },
        series: [{
          name: '综合得分',
          type: 'line',
          data: this.grades
        }],
        title: ([{
          text: '综合评分数据统计',
          left: 'center',
          // bottom: -5,
          textStyle: {
            fontSize: 25
          }
        }])
      }
      // 综合评分数据统计配置结束

      // 昼夜比数据统计配置开始
      var dnOption = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} :<br/> {c}分钟 ({d}%)'
        },
        title: ([{
          text: '行驶昼夜比数据统计',
          left: 'center',
          // bottom: -5,
          textStyle: {
            fontSize: 25
          }
        }]),
        legend: {
          orient: 'vertical',
          data: ['夜间行驶时长', '白天行驶时长'],
          // center:'center',
          bottom: 'bottom'
        },
        backgroundColor: '#ffffff',
        color: ['#37A2DA', '#32C5E9'],
        series: [{
          label: {
            normal: {
              fontSize: 18,
              position: 'inside',
              show: true,
              formatter: '{c}分钟 \n ({d}%)',
              textStyle: {
                align: 'center',
                baseline: 'middle',
                fontFamily: '微软雅黑',
                fontSize: 15,
                fontWeight: 'bolder'
              }
            }
          },
          type: 'pie',
          center: ['50%', '50%'],
          data: [ {
            value: this.basicInfo.nightTime,
            name: '夜间行驶时长'
          }, {
            value: this.basicInfo.dayTime,
            name: '白天行驶时长'
          }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 2, 2, 0.3)'
            }
          }
        }]
      }
      // 昼夜比数据统计配置结束

      // 里程数据统计配置开始
      var wkOption = {

        backgroundColor: '#ffffff',
        color: ['#37A2DA'],
        tooltip: {
          trigger: 'axis',
          // formatter:'{b}<br/>{a}:{c}km',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.dates
        }],
        yAxis: [{
          type: 'value',
          name: '公里'
        }],
        series: [{
          name: '行驶里程',
          type: 'bar',
          barWidth: '70%',
          data: this.basicInfo.totalDistances
        }],
        title: ([{
          text: '里程数据统计',
          left: 'center',
          // bottom: -20,
          textStyle: {
            fontSize: 25
          }
        }])
      }
      // 里程数据统计配置结束
      // 行驶时长数据统计开始
      var dhOption = {

        backgroundColor: '#ffffff',
        color: ['#37A2DA'],
        tooltip: {
          trigger: 'axis',
          // formatter:'{b}<br/>{a}:{c}km',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.dates
        }],
        yAxis: [{
          type: 'value',
          name: '分钟'
        }],
        series: [{
          name: '行驶时长',
          type: 'bar',
          barWidth: '70%',
          data: this.basicInfo.totalTimes
        }],
        title: ([{
          text: ' 行驶时长数据统计',
          left: 'center',
          // bottom: -5,
          textStyle: {
            fontSize: 25
          }
        }])
      }
      // 行驶时长数据统计结束
      // 行驶车速数据统计开始
      var dsOption = {

        backgroundColor: '#ffffff',
        color: ['#67E0E3'],
        tooltip: {
          trigger: 'axis',
          // formatter:'{b}<br/>{a}:{c}km',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.dates
        }],
        yAxis: [{
          type: 'value',
          name: 'km/h'
        }],
        series: [{
          name: '行驶车速',
          type: 'bar',
          barWidth: '70%',
          data: this.basicInfo.avgSpeeds
        }],
        title: ([{
          text: ' 行驶车速数据统计',
          left: 'center',
          // bottom: -5,
          textStyle: {
            fontSize: 25
          }
        }])
      }
      // 行驶车速数据统计结束

      fhChart.setOption(fhOption)
      ssChart.setOption(ssOption)
      dnChart.setOption(dnOption)
      wkChart.setOption(wkOption)
      dhChart.setOption(dhOption)
      dsChart.setOption(dsOption)
    }
  },
  name: 'analysis'
}
</script>
<style type="text/css" scoped>
.page-body{
  padding: 15px;
}
.page-body .page-header{
  background: #fff;
  padding: 15px;
  margin: -15px -15px 15px -15px;
}
 .box-card{
  width: 90%;
   /*height: 500px; 高度需要删除 */
  margin: 10px;
  border-radius: 10px; 
}
.chart{
  display: inline-block;
  background: white;
  height: 400px;
  width: 100%;
}
</style>
